<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>需求管理 - 任务管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <link th:href="@{/css/main.css}" rel="stylesheet">
    <link th:href="@{/css/requirements.css}" rel="stylesheet">
</head>
<body>
    <!-- 主导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="bi bi-kanban"></i> 任务管理系统
            </a>
            <div class="navbar-nav me-auto">
                <a class="nav-link" href="/dashboard">🏠 工作台</a>
                <a class="nav-link" href="/projects">📋 项目管理</a>
                <a class="nav-link active" href="/requirements">📝 需求管理</a>
                <a class="nav-link" href="/tasks">✅ 任务管理</a>
                <a class="nav-link" href="/developers">👥 开发者管理</a>
            </div>
            <div class="navbar-nav">
                <div class="nav-item">
                    <input type="search" class="form-control" placeholder="全局搜索..." id="globalSearch">
                </div>
                <a class="nav-link" href="/settings">⚙️ 系统设置</a>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <!-- 侧边导航 -->
            <nav class="col-md-2 d-md-block bg-light sidebar">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="/dashboard">
                                <i class="bi bi-house"></i> 工作台
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/projects">
                                <i class="bi bi-folder"></i> 项目管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="/requirements">
                                <i class="bi bi-file-text"></i> 需求管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/tasks">
                                <i class="bi bi-check-square"></i> 任务管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/developers">
                                <i class="bi bi-people"></i> 开发者管理
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/settings">
                                <i class="bi bi-gear"></i> 系统设置
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>

            <!-- 主内容区域 -->
            <main class="col-md-10 ms-sm-auto px-md-4">
                <!-- 面包屑导航 -->
                <nav aria-label="breadcrumb" class="mt-3">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/dashboard">工作台</a></li>
                        <li class="breadcrumb-item active" aria-current="page">需求管理</li>
                    </ol>
                </nav>

                <!-- 页面标题和操作区 -->
                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">需求管理</h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRequirementModal">
                                <i class="bi bi-plus"></i> 新建需求
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 筛选面板 -->
                <div class="filter-panel collapse" id="filterPanel">
                    <div class="card mb-3">
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label for="projectFilter" class="form-label">项目</label>
                                    <select class="form-select" id="projectFilter">
                                        <option value="">全部项目</option>
                                        <!-- 项目选项将通过JavaScript动态加载 -->
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="statusFilter" class="form-label">状态</label>
                                    <select class="form-select" id="statusFilter">
                                        <option value="">全部状态</option>
                                        <option value="DRAFT">草稿</option>
                                        <option value="ACTIVE">激活</option>
                                        <option value="APPROVED">已批准</option>
                                        <option value="REJECTED">已拒绝</option>
                                        <option value="CANCELLED">已取消</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="priorityFilter" class="form-label">优先级</label>
                                    <select class="form-select" id="priorityFilter">
                                        <option value="">全部优先级</option>
                                        <option value="LOW">低</option>
                                        <option value="MEDIUM">中</option>
                                        <option value="HIGH">高</option>
                                        <option value="URGENT">紧急</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="ownerFilter" class="form-label">负责人</label>
                                    <select class="form-select" id="ownerFilter">
                                        <option value="">全部负责人</option>
                                        <!-- 负责人选项将通过JavaScript动态加载 -->
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-12">
                                    <button type="button" class="btn btn-primary" id="applyFilterBtn">应用筛选</button>
                                    <button type="button" class="btn btn-outline-secondary" id="clearFilterBtn">清除筛选</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 需求列表 -->
                <div class="requirement-list">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col">
                                        <input class="form-check-input" type="checkbox" id="selectAll">
                                    </th>
                                    <th scope="col">需求标题</th>
                                    <th scope="col">项目</th>
                                    <th scope="col">优先级</th>
                                    <th scope="col">负责人</th>
                                    <th scope="col">创建时间</th>
                                    <th scope="col">操作</th>
                                </tr>
                            </thead>
                            <tbody id="requirementTableBody">
                                <!-- 需求数据将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 分页 -->
                    <nav aria-label="需求列表分页">
                        <ul class="pagination justify-content-center" id="pagination">
                            <!-- 分页将通过JavaScript动态生成 -->
                        </ul>
                    </nav>
                    
                    <!-- 加载状态 -->
                    <div id="loadingSpinner" class="text-center py-4">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                    </div>
                    
                    <!-- 空状态 -->
                    <div id="emptyState" class="text-center py-5" style="display: none;">
                        <i class="bi bi-file-text display-1 text-muted"></i>
                        <h3 class="text-muted mt-3">暂无需求</h3>
                        <p class="text-muted">点击上方"新建需求"按钮开始创建需求</p>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 添加需求模态框 -->
    <div class="modal fade" id="addRequirementModal" tabindex="-1" aria-labelledby="addRequirementModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addRequirementModalLabel">新建需求</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addRequirementForm">
                        <div class="mb-3">
                            <label for="requirementTitle" class="form-label">需求标题 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="requirementTitle" required maxlength="200">
                        </div>
                        <div class="mb-3">
                            <label for="requirementDescription" class="form-label">需求描述 <span class="text-danger">*</span></label>
                            <textarea class="form-control" id="requirementDescription" rows="4" required maxlength="2000"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="requirementProject" class="form-label">所属项目 <span class="text-danger">*</span></label>
                                <select class="form-select" id="requirementProject" required>
                                    <option value="">请选择项目</option>
                                    <!-- 项目选项将通过JavaScript动态加载 -->
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="requirementOwner" class="form-label">负责人</label>
                                <select class="form-select" id="requirementOwner">
                                    <option value="">请选择负责人</option>
                                    <!-- 负责人选项将通过JavaScript动态加载 -->
                                </select>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-6">
                                <label for="requirementPriority" class="form-label">优先级 <span class="text-danger">*</span></label>
                                <select class="form-select" id="requirementPriority" required>
                                    <option value="">请选择优先级</option>
                                    <option value="LOW">低</option>
                                    <option value="MEDIUM">中</option>
                                    <option value="HIGH">高</option>
                                    <option value="URGENT">紧急</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="requirementDeadline" class="form-label">截止时间 <span class="text-danger">*</span></label>
                                <input type="datetime-local" class="form-control" id="requirementDeadline" required>
                            </div>
                        </div>
                        <div class="mt-3">
                            <label class="form-label">参考文档 <small class="text-muted">(可选)</small></label>
                            <div class="reference-documents">
                                <div class="card border-light">
                                    <div class="card-body p-3">
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="flex-fill me-2">
                                                <input type="text" class="form-control" placeholder="请输入文档标题，如：API设计文档" id="docTitle">
                                            </div>
                                            <div class="flex-fill me-2">
                                                <input type="url" class="form-control" placeholder="请输入文档链接，如：https://example.com/doc" id="docUrl">
                                            </div>
                                            <button type="button" class="btn btn-primary px-3" id="addDocBtn" title="点击添加文档">
                                                <i class="bi bi-plus me-1"></i>添加
                                            </button>
                                        </div>
                                        <small class="text-muted">💡 填写标题和链接后，点击"添加"按钮将文档加入列表</small>
                                    </div>
                                </div>
                                <div id="documentList" class="mt-3">
                                    <!-- 已添加的文档将显示在这里 -->
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveRequirementBtn">创建需求</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Toast 通知 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header bg-success text-white">
                <i class="bi bi-check-circle me-2"></i>
                <strong class="me-auto">成功</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="successMessage">
                操作成功！
            </div>
        </div>
        
        <div id="errorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header bg-danger text-white">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <strong class="me-auto">错误</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body" id="errorMessage">
                操作失败，请重试！
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script th:src="@{/js/main.js?v=10}"></script>
    <script th:src="@{/js/requirements.js?v=10}"></script>
</body>
</html>